<template>
  <view>
    <view :style="{ paddingTop: `${barHeight}px` }" class="me"/>
    <view :style="{ paddingTop: `${barHeight}px` }" class="me"/>
    <view style="height: 80%">
      <scroll-view scroll-y="true" class="scroll-Y">
        <view v-for="(item, index) in productList" class="price-item">
          <view class="price-item-title">
            <input style="width: 60%;" class="uni-input" v-model="item.productName" placeholder="输入商品名"/>
            <view style="width: 40%;text-align: right;">{{ item.totalPrice + "元/克" }}</view>
          </view>
          <view class="price-item-bottom">
            <view style="text-align: center">
              <input style="font-weight: bold;margin-bottom: 10rpx" class="uni-input" v-model="item.price"
                     placeholder="输入总价" @input="buildPrice(item, index)" type="digit"/>
              <view>总价</view>
            </view>
            <view style="text-align: center">
              <input style="font-weight: bold;margin-bottom: 10rpx" class="uni-input" v-model="item.number"
                     placeholder="输入数量" @input="buildPrice(item, index)" type="number"/>
              <view>数量</view>
            </view>
            <view style="text-align: center">
              <input style="font-weight: bold;margin-bottom: 10rpx" class="uni-input" v-model="item.netContent"
                     placeholder="输入净含量" @input="buildPrice(item, index)" type="digit"/>
              <view>净含量</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <button class="float-button" hover-class="hover-btn-bg" @click="addProduct">
      <uni-icons type="plusempty" size="40px" color="#fff"/>
    </button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      productList: [],
      barHeight: 0,
      statusBarHeight: 0
    };
  },
  onLoad() {
    // 状态栏高度
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
    // 胶囊数据
    const {
      top,
      height
    } = wx.getMenuButtonBoundingClientRect();
    // 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2, 如果获取不到设置为36
    this.barHeight = height ? height + (top - this.statusBarHeight) * 2 : 36;
  },
  methods: {
    addProduct() {
      this.productList.push({
        productName: "",
        totalPrice: 0,
        price: null,
        number: null,
        netContent: null
      })
    },
    buildPrice(item, index) {
      if (item.price == null || item.price == "" || item.price == 0) {
        return
      }
      if (item.netContent == null || item.netContent == "" || item.netContent == 0) {
        return
      }
      if (item.number == null || item.number == "" || item.number == 0) {
        return
      }
      this.productList[index].totalPrice = (item.price / (item.number * item.netContent)).toFixed(4)
    }
  }
}
</script>

<style lang="scss">
.price-item {
  background: #FFFFFF;
  border-radius: 20rpx;
  margin: 20rpx 20rpx;
  padding: 20rpx 20rpx;

  .price-item-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: #d6d6d6 1px solid;
    padding-bottom: 20rpx;
    font-size: 36rpx;
    font-weight: bold;
  }

  .price-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20rpx;
    font-size: 34rpx;
  }
}

.float-button {
  position: fixed;
  right: 70rpx;
  bottom: 200rpx;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background: #FF5184;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.4);
  z-index: 999;
}

.hover-btn-bg {
  background-color: #FF5184;
  color: #fff;
}

.aaa {
  color: #6a6a6a;
}
</style>
